﻿@page "/listbox/default-functionalities"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the default functionalities of a ListBox component. Click any item to select a single item and Ctrl +  click to select multiple items.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>ListBox</code> is a graphical user interface component used to display a list of items. Users can select one or more items in the list using a checkbox or by keyboard selection. It supports sorting, grouping, reordering, and drag and drop of items.</p>
   <p>In this sample, data is bound to the ListBox using the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource' target='_blank'> DataSource</a> property. You can select your favorite cars from the ListBox.</p>
   <p> More information about the Blazor ListBox component can be found in the <a href='https://blazor.syncfusion.com/documentation/listbox/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div id="listbox-control">
        <h4>Select your favorite car:</h4>
        <SfListBox Value=@value DataSource="@vehicleData" TValue="string[]" TItem="ListItem">
            <ListBoxFieldSettings Text="Text" Value="Id"></ListBoxFieldSettings>
        </SfListBox>
    </div>
</div>

@code
{
    private string[] value = new string[] { "List-01" };
    private List<ListItem> vehicleData = new List<ListItem>
    {
        new ListItem { Text = "Hennessey Venom", Id = "List-01" },
        new ListItem { Text = "Bugatti Chiron", Id = "List-02" },
        new ListItem { Text = "Bugatti Veyron Super Sport", Id = "List-03" },
        new ListItem { Text = "SSC Ultimate Aero", Id = "List-04" },
        new ListItem { Text = "Koenigsegg CCR", Id = "List-05" },
        new ListItem { Text = "McLaren F1", Id = "List-06" },
        new ListItem { Text = "Aston Martin One- 77", Id = "List-07" },
        new ListItem { Text = "Jaguar XJ220", Id = "List-08" },
        new ListItem { Text = "McLaren P1", Id = "List-09" },
        new ListItem { Text = "Ferrari LaFerrari", Id = "List-10" }
    };
    public class ListItem
    {
        public string Text { get; set; }
        public string Id { get; set; }
    }
}

<style>
    #listbox-control {
        width: 350px;
        margin: auto;
    }

    @@media screen and (max-width: 590px) {
        #listbox-control {
            width: 100%;
        }
    }
</style>
